<template>
  <div>
    <div style="box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    width:90vn" ref="gsBox">
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-button style="margin:5px" size="small" type="info" light @click="click">淡色</gs-button>
      <gs-button style="margin:5px" size="small" type="primary" light @click="click">淡色</gs-button>
      <gs-button style="margin:5px" size="small" type="success" light @click="click">淡色</gs-button>
      <gs-button style="margin:5px" size="small" type="warning" light @click="click">淡色</gs-button>
      <gs-button style="margin:5px" size="small" type="danger" light @click="click">淡色</gs-button>
      <gs-button style="margin:5px" size="small" type="round" light @click="click">淡色</gs-button>
      <gs-button style="margin:5px" size="small" type="while" light @click="click">淡色</gs-button>
    </div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-button style="margin:5px" size="small" type="info"  @click="click">深色</gs-button>
      <gs-button style="margin:5px" size="small" type="primary"  @click="click">深色</gs-button>
      <gs-button style="margin:5px" size="small" type="success"  @click="click">深色</gs-button>
      <gs-button style="margin:5px" size="small" type="warning"  @click="click">深色</gs-button>
      <gs-button style="margin:5px" size="small" type="danger"  @click="click">深色</gs-button>
      <gs-button style="margin:5px" size="small" type="round"  @click="click">深色</gs-button>
      <gs-button style="margin:5px" size="small"   @click="click">深色</gs-button>
    </div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-button style="margin:5px" size="small" type="info" circle @click="click"><i class="iconfont iconsearch"></i></gs-button>
      <gs-button style="margin:5px" size="small" type="primary" circle @click="click"><i class="iconfont iconclear2"></i></gs-button>
      <gs-button style="margin:5px" size="small" type="success" circle @click="click"><i class="iconfont iconclear1"></i></gs-button>
      <gs-button style="margin:5px" size="small" type="warning" circle @click="click"><i class="iconfont iconclear1-copy"></i></gs-button>
      <gs-button style="margin:5px" size="small" type="danger" circle @click="click"><i class="iconfont iconclear"></i></gs-button>
      <gs-button style="margin:5px" size="small" type="round" circle @click="click"><i class="iconfont iconsearch"></i></gs-button>
      <gs-button style="margin:5px" size="small"  circle @click="click"><i class="iconfont iconsearch"></i></gs-button>
    </div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-button style="margin:5px" size="mini" type="info"  @click="click">小按钮</gs-button>
      <gs-button style="margin:5px" size="small" type="primary"  @click="click">中等按钮</gs-button>
      <gs-button style="margin:5px" size="big" type="success"  @click="click">大按钮</gs-button>
      <gs-button style="margin:5px" size="mini" type="warning" circle @click="click"><i class="iconfont iconclear1-copy"></i></gs-button>
      <gs-button style="margin:5px" size="small" type="danger" circle @click="click"><i class="iconfont iconclear"></i></gs-button>
      <gs-button style="margin:5px" size="big" type="round" circle @click="click"><i class="iconfont iconsearch"></i></gs-button>
      <gs-button style="margin:5px" size="small"  circle @click="click"><i class="iconfont iconsearch"></i></gs-button>
    </div>
      
    <!--  -->
    <pre class="code">
      <span class="codetitle">使用size定义大小一共三种大小 mini,small,big</span>
      <span class="codetitle">使用type定义风格一共八种风格 dark,primary, success, warning, danger, info,round,while</span>
      <span class="codetitle">使用light定义是否清淡色</span>
      <span class="codetitle">使用circle是否圆形</span>
      <span class="codetitle">使用i标签添加图标</span>
      <gs-code title="gs-button" text="按钮" attr='size="small" type="success" light circle'></gs-code>
      <gs-code title="gs-button" attr='size="small" type="success" circle'><gs-code title="i" attr='class="iconfont iconclear"'></gs-code></gs-code>
     
    </pre>
      
    <!--  -->
    </div>
  </div>
</template>
<script>
import gsButton from "../components/button/button";
import gsCode from "./code";
export default {
  name: 'vButton',
  components: {
    gsCode,
    gsButton
  },
  methods:{
    click(){
      this.$emit("click",arguments)
    },
  },
}
</script>
